<template>
  <div class="coupons">
    <div class="title">
      {{ data.name }}
    </div>
    <!---1/2个优惠券-->
    <el-row v-if="uapilistlength === 1 || uapilistlength === 2">
      <el-col
        v-for="(item,index) in uapilist"
        :key="index+1"
        :span="24"
      >
        <div
          class="background"
          :style="{'backgroundImage':'url('+ imgSrc1 +')',backgroundPosition:'center center',backgroundRepeat: 'no-repeat',backgroundPositionX: '100%'}"
          @click="ToReceive(item)"
        >
          <div class="content">
            <div class="content-item jiage">
              <div>￥<span>{{ item.reduce_amount }}</span></div>
            </div>
            <div class="content-item shop">
              <div class="button">
                满{{ item.start_amount }}可用
              </div>
              <div class="tip">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!---1/2个优惠券END-->

    <!---3个优惠券-->
    <el-row v-if="uapilistlength === 3">
      <el-col
        v-for="(item,index) in uapilist.slice(0 , 1)"
        :key="index+2"
        :span="24"
      >
        <div
          class="background"
          :style="{'backgroundImage':'url('+ imgSrc1 +')',backgroundPosition:'center center',backgroundRepeat: 'no-repeat',backgroundPositionX: '100%'}"
          @click="ToReceive(item)"
        >
          <div class="content">
            <div class="content-item jiage">
              <div>￥<span>{{ item.reduce_amount }}</span></div>
            </div>
            <div class="content-item shop">
              <div class="button">
                满{{ item.start_amount }}可用
              </div>
              <div class="tip">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col
        v-for="(item,index) in uapilist.slice(1 , 2)"
        :key="index+3"
        :span="12"
      >
        <div
          class="background"
          :style="{'backgroundImage':'url('+ imgSrc2 +')',backgroundPosition:'center center',backgroundRepeat: 'no-repeat',backgroundPositionX: '100%'}"
          @click="ToReceive(item)"
        >
          <div class="content">
            <div class="content-item jiage">
              <div>￥<span>{{ item.reduce_amount }}</span></div>
            </div>
            <div class="content-item shop">
              <div class="button">
                满{{ item.start_amount }}可用
              </div>
              <div class="tip">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col
        v-for="(item,index) in uapilist.slice(2 , 3)"
        :key="index+1"
        :span="12"
      >
        <div
          class="background"
          :style="{'backgroundImage':'url('+ imgSrc3 +')',backgroundPosition:'center center',backgroundRepeat: 'no-repeat',backgroundPositionX: '100%'}"
          @click="ToReceive(item)"
        >
          <div class="content">
            <div class="content-item jiage">
              <div>￥<span>{{ item.reduce_amount }}</span></div>
            </div>
            <div class="content-item shop">
              <div class="button">
                满{{ item.start_amount }}可用
              </div>
              <div class="tip">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!---3个优惠券END-->


    <!--4个优惠券-->
    <el-row
      v-if="uapilistlength === 4"
      :gutter="20"
    >
      <el-col
        v-for="(item,index) in uapilist"
        :key="index+1"
        :span="6"
      >
        <div class="new-background">
          <div class="content">
            <div class="content-item jiage">
              <div>￥<span>{{ item.reduce_amount }}</span></div>
            </div>
            <div class="content-item shop">
              <div class="button">
                满{{ item.start_amount }}可用
              </div>
              <el-button
                size="mini"
                round
                @click="ToReceive(item)"
              >
                立即领取
              </el-button>
            </div>
          </div>
          <div class="tip">
            {{ item.title }}
          </div>
        </div>
      </el-col>
    </el-row>
    <!--4个优惠券-->
    <!--4个以上优惠券-->
    <el-row
      v-if="uapilistlength > 4 && uapilistlength % 4 === 0"
      :gutter="20"
    >
      <el-col
        v-for="(item,index) in uapilist"
        :key="index+1"
        :span="6"
      >
        <div class="new-background">
          <div class="content">
            <div class="content-item jiage">
              <div>￥<span>{{ item.reduce_amount }}</span></div>
            </div>
            <div class="content-item shop">
              <div class="button">
                满{{ item.start_amount }}可用
              </div>
              <el-button
                size="mini"
                round
                @click="ToReceive(item)"
              >
                立即领取
              </el-button>
            </div>
          </div>
          <div class="tip">
            {{ item.title }}
          </div>
        </div>
      </el-col>
    </el-row>
    <!--4个以上优惠券-->
    <!--4个以上优惠券 多一个-->
    <div v-if="uapilistlength > 4 && uapilistlength % 4 === 1">
      <el-row>
        <el-col
          v-for="(item,index) in uapilist.slice(-1)"
          :key="index+1"
          :span="24"
        >
          <div
            class="background"
            :style="{'backgroundImage':'url('+ imgSrc1 +')',backgroundPosition:'center center',backgroundRepeat: 'no-repeat',backgroundPositionX: '100%'}"
            @click="ToReceive(item)"
          >
            <div class="content">
              <div class="content-item jiage">
                <div>￥<span>{{ item.reduce_amount }}</span></div>
              </div>
              <div class="content-item shop">
                <div class="button">
                  满{{ item.start_amount }}可用
                </div>
                <div class="tip">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          v-for="(item,index) in uapilist.slice(0, (parseInt(Number(uapilistlength)/4)*4))"
          :key="index+1"
          :span="6"
        >
          <div class="new-background">
            <div class="content">
              <div class="content-item jiage">
                <div>￥<span>{{ item.reduce_amount }}</span></div>
              </div>
              <div class="content-item shop">
                <div class="button">
                  满{{ item.start_amount }}可用
                </div>
                <el-button
                  size="mini"
                  round
                  @click="ToReceive(item)"
                >
                  立即领取
                </el-button>
              </div>
            </div>
            <div class="tip">
              {{ item.title }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--4个以上优惠券 多一个-->

    <!--4个以上优惠券 多两个-->
    <div v-if="uapilistlength > 4 && uapilistlength % 4 === 2">
      <el-row>
        <el-col
          v-for="(item,index) in uapilist.slice(-2)"
          :key="index+1"
          :span="24"
        >
          <div
            class="background"
            :style="{'backgroundImage':'url('+ imgSrc1 +')',backgroundPosition:'center center',backgroundRepeat: 'no-repeat',backgroundPositionX: '100%'}"
            @click="ToReceive(item)"
          >
            <div class="content">
              <div class="content-item jiage">
                <div>￥<span>{{ item.reduce_amount }}</span></div>
              </div>
              <div class="content-item shop">
                <div class="button">
                  满{{ item.start_amount }}可用
                </div>
                <div class="tip">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          v-for="(item,index) in uapilist.slice(0, (parseInt(Number(uapilistlength)/4)*4))"
          :key="index+1"
          :span="6"
        >
          <div class="new-background">
            <div class="content">
              <div class="content-item jiage">
                <div>￥<span>{{ item.reduce_amount }}</span></div>
              </div>
              <div class="content-item shop">
                <div class="button">
                  满{{ item.start_amount }}可用
                </div>
                <el-button
                  size="mini"
                  round
                  @click="ToReceive(item)"
                >
                  立即领取
                </el-button>
              </div>
            </div>
            <div class="tip">
              {{ item.title }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--4个以上优惠券 多两个-->

    <!--4个以上优惠券 多三个-->
    <div v-if="uapilistlength > 4 && uapilistlength % 4 === 3">
      <el-row>
        <el-col
          v-for="(item,index) in uapilist.slice(-3).slice(0 , 1)"
          :key="index+1"
          :span="24"
        >
          <div
            class="background"
            :style="{'backgroundImage':'url('+ imgSrc1 +')',backgroundPosition:'center center',backgroundRepeat: 'no-repeat',backgroundPositionX: '100%'}"
            @click="ToReceive(item)"
          >
            <div class="content">
              <div class="content-item jiage">
                <div>￥<span>{{ item.reduce_amount }}</span></div>
              </div>
              <div class="content-item shop">
                <div class="button">
                  满{{ item.start_amount }}可用
                </div>
                <div class="tip">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col
          v-for="(item,index) in uapilist.slice(-3).slice(1 , 2)"
          :key="index+1"
          :span="12"
        >
          <div
            class="background"
            :style="{'backgroundImage':'url('+ imgSrc2 +')',backgroundPosition:'center center',backgroundRepeat: 'no-repeat',backgroundPositionX: '100%'}"
            @click="ToReceive(item)"
          >
            <div class="content">
              <div class="content-item jiage">
                <div>￥<span>{{ item.reduce_amount }}</span></div>
              </div>
              <div class="content-item shop">
                <div class="button">
                  满{{ item.start_amount }}可用
                </div>
                <div class="tip">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col
          v-for="(item,index) in uapilist.slice(-3).slice(2 , 3)"
          :key="index+1"
          :span="12"
        >
          <div
            class="background"
            :style="{'backgroundImage':'url('+ imgSrc3 +')',backgroundPosition:'center center',backgroundRepeat: 'no-repeat',backgroundPositionX: '100%'}"
            @click="ToReceive(item)"
          >
            <div class="content">
              <div class="content-item jiage">
                <div>￥<span>{{ item.reduce_amount }}</span></div>
              </div>
              <div class="content-item shop">
                <div class="button">
                  满{{ item.start_amount }}可用
                </div>
                <div class="tip">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          v-for="(item,index) in uapilist.slice(0, (parseInt(Number(uapilistlength)/4)*4))"
          :key="index+1"
          :span="6"
        >
          <div class="new-background">
            <div class="content">
              <div class="content-item jiage">
                <div>￥<span>{{ item.reduce_amount }}</span></div>
              </div>
              <div class="content-item shop">
                <div class="button">
                  满{{ item.start_amount }}可用
                </div>
                <el-button
                  size="mini"
                  round
                  @click="ToReceive(item)"
                >
                  立即领取
                </el-button>
              </div>
            </div>
            <div class="tip">
              {{ item.title }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--4个以上优惠券 多三个-->
  </div>
</template>

<script>
	export default {
		name: 'Name',
		props: {
			data: {
				type: Object,
				// 对象或数组默认值必须从一个工厂函数获取
				default: function() {
					return {};
				},
			},
		},
		data() {
			return {
				uapilist: [], // 优惠券列表
				uapilistlength: "", // 优惠券个数
				imgSrc1: require('../../assets/img/uhq-bg01.png'),
				imgSrc2: require('../../assets/img/uhq-bg02.png'),
				imgSrc3: require('../../assets/img/uhq-bg03.png'),
			}
		},
		/* HTML DOM加载后马上执行的，如赋值*/
		computed: {},

		/* 观察Vue实例上的数据变动 */
		watch: {},

		/* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
		created() {},

		/* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
		mounted() {
			this.GetUapiActionData(this.$route.query.id)
		},

		/* methods则必须要有一定的触发条件才能执行 */
		methods: {
			// 优惠券
			GetUapiActionData(shop_id) {
				console.log('token', localStorage.getItem("token"))
				let params = {
					action: 'mm%2Fcoupon%2Fquery',
					pager: {
						pageIndex: "1",
						pageSize: "100",
						totalPage: "",
						totalCount: ""
					},
					order: [{
						name: "create_time",
						order: "desc"
					}],
					conditions: [{
						name: "member_scope_id",
						value1: shop_id,
						type: "string",
						op: "eq"
					}]
				}
				this.$api.commit.UapiAction(params).then((res) => {
					console.log('优惠券', res.data)
					if (res.code == 1) {
						this.uapilist = res.data || []
						this.uapilistlength = res.data.length
					}
				});
			},
			// 领取优惠券
			ToReceive(ToReceive) {
				console.log('领取优惠券', ToReceive, JSON.parse(localStorage.getItem("userInfo")))
				if (JSON.parse(localStorage.getItem("userInfo")) === null) {
					this.$message.error('请先登录再领取');
				} else {
					let params = {
						action: 'mm%2Fcoupon%2Freceive',
						token: localStorage.getItem('token'),
						action_type: ToReceive.type,
						coupon_id: ToReceive.id,
						mid: JSON.parse(localStorage.getItem("userInfo")).mid,
						// quantity: ToReceive.quantity,
						quantity: 1,
					}
					this.$api.commit.ToReceiveUapiAction(params).then((res) => {
						console.log('优惠券', res.data)
						if (res.code == 1) {
							if (res.data.length === 0) {
								this.$message.error('优惠券数量不足')
							} else {
								this.$message.success(res.msg)
							}
						} else {
							this.$message.error(res.msg);
						}
						// if (res.code == 1) {
						//   this.$message.success(res.msg);
						// } else {
						//   this.$message.error(res.msg);
						// }
					});
				}
			}
		}
	}
</script>

<style style lang='scss' scoped>
	.coupons {
		padding: 0 16.19rem;
		margin-top: 2.19rem;
		display: flex;
		flex-direction: column;

		.title {
			width: 11.25rem;
			height: 3.44rem;
			background: rgba(0, 0, 0, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.5rem;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(234, 234, 234, 1);
		}

		.new-background {
			background: white;
			height: 11rem;
			margin-top: 1.88rem;
			align-items: center;
			align-items: center;
			justify-content: center;
			text-align: center;

			.content {
				width: 90%;
				height: 8rem;
				margin: 0 auto;

				.jiage {
					color: #25c8ac;
					width: 50%;
					height: 6rem;
					float: left;
					padding: 2rem 0 0 0;

					div {
						font-size: 1.2rem;
						display: flex;
						align-items: stretch;
					}

					span {
						font-size: 5rem;
					}
				}

				.shop {
					width: 50%;
					float: left;
					padding: 2rem 0;

					.button {
						text-align: center;
						font-size: .8rem;
						margin-bottom: .6rem;
					}

					.el-button {
						background: #25c8ac;
						color: white;
					}

					.tip {
						margin: 1rem 0;
						display: flex;
						width: 100%;
						font-size: 1rem;
					}
				}
			}
		}

		.background {
			height: 11rem;
			margin-top: 1.88rem;
			display: flex;
			align-items: center;
			cursor: pointer;
			background-size: cover;
			.content {
				width: 60%;
				margin: 0 5rem;
				display: flex;

				.content-item {
					flex: 1;
					align-items: center;
					justify-content: center;
					color: white;
				}

				.jiage {
					div {
						font-size: 1.2rem;
					}

					span {
						font-size: 5rem;
					}
				}

				.shop {
					.button {
						border: 1px solid white;
						width: 6rem;
						padding: .5rem;
						border-radius: 1rem;
						text-align: center;
						font-size: .8rem;
					}

					.tip {
						margin: 1rem 0;
						font-size: 1rem;
					}
				}
			}
		}
	}
</style>
